<template>
  <div class="ZYF-technical">
    <div class="technical-top">
      <h3 class="h3">公司宣传资料</h3>
      <div class>
        <span class="from-label">关键词</span>
        <a-input-search placeholder="请输入搜索的关键词" style="width: 200px" @search="onSearch" />
      </div>
    </div>
    <div class="technical-bottom">
      <div class="video-box__left">
        <div class="article-list__box">
          <div class="article-title">
            <span class="border-text h3">最新资料</span>
          </div>
          <div class="border-content">
            <a-table :columns="columns" :data-source="data" :pagination="false" />
            <div class="page-box">
              <div class="page-left">
                <a-pagination
                  :show-total="total => `共 ${total}条记录`"
                  v-model="form.current"
                  :total="total"
                  :defaultPageSize="form.size"
                  :item-render="itemRender"
                  @change="pagechangeFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-box__right">
        <div class="article-title">
          <span class="border-text h3">最热培训</span>
        </div>
        <ul class="ul-class">
          <li class="li-child" v-for="(item,i) in hotData" :key="i">
            <div class="tubiao">{{i+1}}</div>
            <span>{{item.content}}</span>
          </li>
        </ul>
        <!-- <a-upload
          :showUploadList="false"
          list-type="text"
          action="//jsonplaceholder.typicode.com/posts/"
          :preview-file="previewFile"
          class="upload-box"
        >
          <a-button>
            <a-icon
              type="cloud-upload"
              style="color:rgba(0,0,0,0.6);font-weight: 600;font-size:40px"
            />上传我的资源
          </a-button>
        </a-upload>-->
        <a-upload
          :showUploadList="false"
          name="multipartFile"
          :multiple="true"
          list-type="text"
          action="http://10.10.10.42:8801/api/file/uploadFile"
          :headers="headers"
          @change="handleChange"
          class="upload-box"
        >
          <a-button>
            <a-icon type="upload" style="color:rgba(0,0,0,0.6);font-weight: 600;font-size:40px" />上传我的资源
          </a-button>
        </a-upload>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";

export default {
  data() {
    return {
      moment,
      hotData: [],
      data: [],
      columns: [
        {
          dataIndex: "num",
          align: "center",
          width: "5%",
          customRender: (text, record, index) =>
            `${(this.form.current - 1) * this.form.size + index + 1}`,
        },
        {
          dataIndex: "title",
          align: "center",
          width: "20%",
          ellipsis: true,
        },
        {
          dataIndex: "content",
          align: "center",
          width: "15%",
          ellipsis: true,
        },
        {
          dataIndex: "creatTime",
          ellipsis: true,
          width: "15%",
          align: "center",
        },
      ],
      total: 0,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      activeKey: 0,
      headers: {
        authorization: "authorization-text",
      },
      form: {
        current: 1,
        size: 5,
        keyword: "",
        contentType: "",
        informationType: "公司运维制度规定",
      },
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    handleChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        //this.$message.success(`${info.file.name} file uploaded successfully`);
        this.$message.success("上传成功");
        console.log(info.file.response.data.fileUrl);
      } else if (info.file.status === "error") {
        this.$message.error("上传失败");
      }
    },
    //查询数据
    onSubmit() {
      this.$api.inquire_Data(this.form).then((res) => {
        //
        if (res.status == 200) {
          this.data = res.data.data;
          this.data.forEach((v) => {
            // console.log(moment(parseInt(v.creatTime)));
            v.creatTime = moment(v.creatTime).format("YYYY/MM/DD ");
          });
          this.total = res.data.total;
        }
      });
    },
    //最新十条数据
    getHotData() {
      this.$api.hot_newData(this.form.informationType).then((res) => {
        if (res.status == 200) {
          this.hotData = res.data.data;
        }
      });
    },
    //搜索按钮
    onSearch(value) {
      console.log(value);
      this.form.keyword = value;
      this.onSubmit();
    },

    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(pageSize);
      this.current = page;
      this.onSubmit();
    },
    open(index) {
      this.activeKey = index;
    },
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onSelect(keys, event) {
      console.log("Trigger Select", keys, event);
    },
    onExpand() {
      console.log("Trigger Expand");
    },
  },

  mounted() {
    this.getHotData();
    this.onSubmit();
  },
};
</script>
<style scoped src="../../../assets/style/pollution.css"></style>

<style scoped>
.ZYF-technical {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.technical-top {
  width: 100%;
  height: 6%;
  display: flex;
  justify-content: space-between;
}
.from-label {
  color: #9fb043;
  margin-right: 10px;
}
.technical-bottom {
  width: 100%;
  height: 92%;
  display: flex;
  justify-content: space-between;
}
.video-box__left {
  width: 70%;
  height: 100%;
}
.article-list__box {
  width: 100%;
  height: 100%;
}
.article-title {
  display: flex;
  justify-content: space-between;
}
.border-text {
  font-weight: 600;
  padding-left: 6px;
  border-left: 5px solid #9fb043;
}
.article-father {
  width: 100%;
  height: 90%;
  margin-top: 1%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.acticle-child {
  width: 24%;
  height: 48%;
}
.img-box {
  width: 100%;
  height: 88%;
  position: relative;
}
.img-box img {
  width: 100%;
  height: 100%;
}
.resources-title {
  width: 100%;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 10px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  left: 0;
}
.resources-bottom {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.list-box__right {
  width: 26%;
  height: 100%;
}
.page-box {
  position: absolute;
  width: 30%;
  right: 380px;
  bottom: 280px;
}
.page-left {
  position: absolute;
  right: 34%;
  margin-top: 30px;
}
.ul-class {
  width: 100%;
  height: 75%;
  border: 1px solid #207064;
  margin-top: 14px;
  padding: 16px;
  box-sizing: border-box;
}
.li-child {
  width: 100%;
  border-bottom: 1px dashed #207064;
  height: 51px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.li-child:last-child {
  border-bottom: 0;
}
.tubiao {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: #33818d;
  text-align: center;
  position: relative;
}
.tubiao::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent #33818d transparent;
  position: absolute;
  left: 0;
  bottom: -8px;
}
.tubiao::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 8px 8px 8px 0;
  border-style: solid;
  border-color: transparent #33818d transparent;
  position: absolute;
  right: 0;
  bottom: -8px;
}
.li-child span {
  color: rgba(255, 255, 255, 0.7);
  padding: 0 12px;
}
.upload-box {
  width: 100%;
  height: 14%;
  display: inline-block;
  margin-top: 10%;
}
.border-content {
  margin-top: 16px;
  height: 75%;
  padding: 0 20px;
  border: 1px solid #207064;
}
::v-deep.ant-pagination {
  color: rgb(168, 166, 166);
}
::v-deep.ZYF-technical .ant-upload,
::v-deep.ZYF-technical .ant-btn {
  width: 100%;
  height: 100%;
  font-size: 30px;
  font-weight: 600;
  background-color: #2c6a60;
  border: 1px solid #2c6a60;
  border-radius: 8px;
  display: inline-block;
}
::v-deep .ant-table-thead > tr > th {
  display: none;
}
::v-deep .ant-table-tbody > tr > td {
  border-bottom: 1px dashed #207064;
}
</style>
